<template>
  <Dialog v-model="dialogVisible" :title="'地图选点'" max-height="460px" scroll>
    <el-form :inline="true" label-width="0px" @submit.native.prevent>
      <el-input v-model="location" style="width: 100%" placeholder="请输入地址，如北京" @keyup.enter="queryLocation">
        <template #append>
          <el-button :icon="Search" @click="queryLocation" />
        </template>
      </el-input>
    </el-form>
    <div class="map">
      <WebGDMap ref="refMap" :longitudelatitude="longitudelatitude" />
    </div>
    <div class="footer">
      <el-button @click="dialogVisible = false">返 回</el-button>
      <el-button type="primary" @click="submitForm" class="!ml-40px">确 认</el-button>
    </div>
  </Dialog>
</template>
<script lang="ts" setup>
  import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
  import * as BlacklistApi from "@/api/blacklistManage";
  import { CommonStatusEnum } from '@/utils/constants'
  import * as CustMgrApi from '@/api/queue/custMgr'
  import { Search } from '@element-plus/icons-vue'
  import mitt from '@/utils/mitter'

  const props = defineProps({
    longitudelatitude: {}
  })

  const longitudelatitude = computed(() => {
    return props.longitudelatitude
  })

  const emit = defineEmits(['success'])
  const dialogVisible = ref(false) // 弹窗的是否展示
  const refMap = ref()
  const location = ref()
  const latlngInfo = ref({
    lat: '',
    lng: ''
  })

  /** 打开弹窗 */
  const open = async (type, id) => {
    location.value = undefined
    dialogVisible.value = true
  }

  const queryLocation = () => {
    if (!location.value) {
      return
    }
    refMap.value.searchPOsition(location.value)
  }

  const submitForm = () => {
    emit('success', latlngInfo.value)
    dialogVisible.value = false
  }

  onMounted(() => {
    mitt.on('handlatlngChange', (info) => {
      latlngInfo.value = info
    })
  })

  defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>
  .map {
    margin-top: 20px;
    width: 100%;
    height: 350px;
  }

  .footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
  }
</style>